import React,{useState,useEffect} from 'react'
import axios from "axios"
import List from './component/List'  //引入
import Xia from './component/Xia'

function App() {
  let [list,setlist] = useState([])
  let [xiabiao,setxiabiao] = useState(0)

  let tabbtn = (index)=>{  //点击事件切换下标
       setxiabiao(index)
  }
  
  useEffect(()=>{
   axios.get("/api/list").then(res=>{  //发请求
    setlist(res.data.data.list)
    // console.log(res.data)
   })
  },[])
  return (
    <div className='app'>
      <div className='header'>
        {
          list && list.map((item,index)=>{ //tab切换
            return <span key={item.id} onClick={()=>{
                 tabbtn(index)
            }} className={index === xiabiao ? "active" : ""}>{item.name}</span>
          })
        }
      </div>
      <div className='main'>
        {/* 列表组件he父子传参 */}
        <List listchildren={list[xiabiao] && list[xiabiao].children}></List> 
      </div>
      <div className='footer'>
        {/*底部组件和 父子传参 */}
        <Xia flag={true}></Xia>
      </div>
      </div>
  )
}

export default App